<html>
  <head>
    <title>&Ugrave;ltimos posts de mis blogs favoritos</title>
    <script type = "text/javascript">

    //Función para borrar resultados anteriores
    function removeOldResults()
    {
      var div = document.getElementById('data');
      if (div.firstChild) { div.removeChild(div.firstChild); }
    }

    //Función para borrar los scripts anteriores que se hayan creado
    function removeOldJSONScriptNodes()
    {
      var jsonScript = document.getElementById('jsonScript');
      if (jsonScript) { jsonScript.parentNode.removeChild(jsonScript); }
    }

    //Los resultados nos salen como una lista numerada en html (de más nuevos a más antiguos)
    function obtenerposts(json)
    {
      removeOldResults();
      var ol = document.createElement('ol');
      for (var i = 0; i < 5; i++)
      {
        var entry = json.feed.entry[i];
        var alturl;
        for (var k = 0; k < entry.link.length; k++)
        {
          if (entry.link[k].rel == 'alternate')
          {
            alturl = entry.link[k].href;
            break;
          }
        }
       
        var li = document.createElement('li');
        var a = document.createElement('a'); //Crea enlaces a los posts
        a.href = alturl;
        a.target = '_blank';

        var txt = document.createTextNode(entry.title.$t);
        a.appendChild(txt);
        li.appendChild(a);

        ol.appendChild(li);
      }

      document.getElementById('data').appendChild(ol);
    }

    //Función search que se llama al apretar el botón con el mismo nombre
    function search(query)
    {
      removeOldJSONScriptNodes();
      removeOldResults();

      var script = document.createElement('script');
      script.setAttribute('src', 'http://' + query + '.blogspot.com/feeds/posts' + '/default?alt=json-in-script&callback=obtenerposts');
      script.setAttribute('id', 'jsonScript');
      script.setAttribute('type', 'text/javascript');
      document.documentElement.firstChild.appendChild(script);
    }

    </script>
  </head>

  <body>

    <h2>Elige un blog y podr&aacute;s ver los &uacute;ltimos 5 posts actualizados.</h2>

    <form onsubmit="return false">
    <p>Blog: http://<select name="blog_name">
    <option>unintendedbear</option>
    <option>jonrivero</option>
    <option>granadainconformista</option>
    </select>.blogspot.com&nbsp;

    <button id = 'search_button' onclick = "search(this.form.blog_name.options[this.form.blog_name.selectedIndex].text);">Search</button></p></form>

    <div id = "data"></div>

  </body>

</html>
